<template>
  <div class="container">

    <div class="tabsWrapper">
      <el-scrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper">
        <el-tabs v-model="activeTab" type="vertical" tab-position="left">
          <el-tab-pane v-for="(tab, index) in tabs"
                       :label="tab.label"
                       :name="tab.name"
                       :key="index" />
        </el-tabs>
      </el-scrollbar>
    </div>

    <div class="cardsWrapper">
      <div class="search-wrapper">
        <el-input
            v-model="searchText"
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            clearable
            @clear="handleClear"
            @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-pagination
          background
          @current-change="handlePageChange"
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="filteredCards.length"
          class="pagination"
      >
      </el-pagination>

      <el-card
          v-for="(card, index) in currentCards"
          :key="index"
          class="box-card"
      >
        <div class="card-content">
          <div class="image-wrapper">
            <img :src="card.image" class="card-image" alt="Card Image" />
          </div>
          <div class="text-wrapper">
            <div class="card-title">{{ card.content }}</div>
            <div class="card-metadata">{{ card.address }}</div>
            <div class="card-metadata">{{ card.contact }}</div>
            <div class="card-metadata">{{ card.description }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import logo from '@/assets/logo.png'

export default {
  setup() {
    const tabs = ref([
      { label: 'All',name: ['all'] },
      { label: '安徽', name: ['1'], },
      { label: '北京', name: ['2'],},
      { label: '重庆', name: ['3'], },
      { label: '福建', name: ['4'], },
      { label: '甘肃', name: ['5'], },
      { label: '广东', name: ['6'], },
      { label: '广西', name: ['7'], },
      { label: '贵州', name: ['8'], },
      { label: '海南', name: ['9'], },
      { label: '河北', name: ['10'], },
      { label: '黑龙江', name: ['11'], },
      { label: '河南', name: ['12'], },
      { label: '湖北', name: ['13'], },
      { label: '湖南', name: ['14'], },
      { label: '江苏', name: ['15'], },
      { label: '江西', name: ['16'], },
      { label: '吉林', name: ['17'], },
      { label: '辽宁', name: ['18'], },
      { label: '内蒙古', name: ['19'], },
      { label: '宁夏', name: ['20'], },
      { label: '青海', name: ['21'], },
      { label: '山东', name: ['22'], },
      { label: '山西', name: ['23'], },
      { label: '陕西', name: ['24'], },
      { label: '上海', name: ['25'], },
      { label: '四川', name: ['26'], },
      { label: '台湾', name: ['27'], },
      { label: '天津', name: ['28'], },
      { label: '香港', name: ['29'], },
      { label: '新疆', name: ['30'], },
      { label: '西藏', name: ['31'], },
      { label: '云南', name: ['32'], },
      { label: '浙江', name: ['33'], },
    ]);
    const cards = ref([
      { content: '王二磊教授',
        tabs: ['1'],
        image:logo,
        address:"合肥市立医院肿瘤科主任",
        contact:"电话：0551-65129120",
        description:"专注于肿瘤学领域，熟练掌握肿瘤的诊断、治疗和康复，为患者提供综合性的肿瘤护理。",
      },
      { content: '张一丁教授',
        tabs: ['1'],
        image:logo,
        address:"安徽医科大学附属第一医院心血管内科主任",
        contact:"电话：0551-65161114",
        description:"擅长心血管疾病的诊断和治疗，在心脏病、高血压等方面具有丰富的临床经验。",
      },
      { content: '李三明教授',
        tabs: ['2'],
        image:logo,
        address:"北京协和医院神经外科主任",
        contact:"电话：010-65123891",
        description:" 超过二十年的神经外科临床经验，擅长神经外科手术和神经系统疾病的治疗。",
      },
      { content: '王四海教授',
        tabs: ['3'],
        image:logo,
        address:"北京大学人民医院消化内科主任",
        contact:"电话：023-68754040",
        description:"专注于消化系统疾病的诊断和治疗，尤其在胃肠道疾病和消化道肿瘤领域有广泛的经验。",
      },
      { content: '张五福教授',
        tabs: ['3'],
        image:logo,
        address:"第一军医大学附属西南医院骨科主任",
        contact:"电话：023-89011618",
        description:"在骨科领域有深厚的学术造诣，擅长骨伤、关节疾病和骨肿瘤的诊断和手术治疗。",
      },
      { content: '王六六教授',
        tabs: ['4'],
        image:logo,
        address:"重庆医科大学附属第一医院内分泌科主任",
        contact:"电话：0591-87830001",
        description:"在内分泌疾病的诊断和治疗方面具有丰富的经验，尤其在糖尿病和甲状腺疾病领域有专长。",
      },
      { content: '陈七七教授',
        tabs: ['4'],
        image:logo,
        address:"福建医科大学附属协和医院心血管内科主任",
        contact:"电话：0591-83353901",
        description:"被广泛认可为心血管内科领域的专家，注重心脏病的个体化治疗和长期管理。",
      },
      { content: '李八八教授',
        tabs: ['5'],
        image:logo,
        address:"福建省人民医院普外科主任",
        contact:"电话：0931-8945863",
        description:"有丰富的普外科手术经验，擅长在胃肠道疾病和消化道肿瘤等领域开展手术治疗。",
      },
      { content: '王九九教授',
        tabs: ['5'],
        image:logo,
        address:"兰州大学第二医院呼吸内科主任",
        contact:"电话：0931-8814745",
        description:"对呼吸系统疾病有深入研究，善于处理哮喘、肺部感染和慢性阻塞性肺病等疾病。",
      },
      { content: '张十十教授',
        tabs: ['5'],
        image:logo,
        address:"兰州大学附属甘肃省肿瘤医院肿瘤科主任",
        contact:"电话：0411-84805555",
        description:"在肿瘤学领域有丰富的理论知识和临床经验，专注于肿瘤的综合治疗和护理。",
      },
      { content: '王晓明教授',
        tabs: ['12'],
        image:logo,
        address:"王晓明教授",
        contact:"电话：020-87755766",
        description:"擅长领域：脑血管疾病、脑肿瘤的手术治疗。",
      },
      { content: '张燕华教授',
        tabs: ['12'],
        image:logo,
        address:"河南省肿瘤医院胸外科主任",
        contact:"电话：020-83063699",
        description:"擅长领域：肺部肿瘤、食管癌等胸外科手术治疗。",
      },
      { content: '李宇航教授',
        tabs: ['13'],
        image:logo,
        address:"武汉大学人民医院心血管内科主任",
        contact:"电话：0771-5353042",
        description:"擅长领域：心血管疾病的诊断与治疗，包括冠心病、高血压等。",
      },
      { content: '王慧娟教授',
        tabs: ['13'],
        image:logo,
        address:"广西壮族自治区南宁市兴宁区大学路21号",
        contact:"电话：0771-5353110",
        description:"",
      },
      { content: '贵州医科大学附属医院',
        tabs: ['8'],
        image:logo,
        address:"贵州省贵阳市云岩区北京路28号",
        contact:"电话：0851-86890120",
        description:"擅长领域：妇科疾病、孕产期保健与高危妊娠管理。",
      },
      { content: '杨洪教授',
        tabs: ['21'],
        image:logo,
        address:"青海省人民医院骨科主任",
        contact:"电话：0851-86803888",
        description:"擅长领域：骨科疾病、骨折、关节置换手术等。",
      },
      { content: '王明月教授',
        tabs: ['21'],
        image:logo,
        address:"青海省肿瘤医院肿瘤科主任",
        contact:"电话：0898-66736673",
        description:"擅长领域：肿瘤学、肿瘤放疗与化疗等治疗。",
      },
      { content: '张宝教授',
        tabs: ['22'],
        image:logo,
        address:"山东大学齐鲁医院心内科主任",
        contact:"电话：0898-66889761",
        description:" 擅长领域：心血管疾病的诊断和治疗，尤其是冠心病、心律失常等。",
      },
      { content: '王雪峰教授',
        tabs: ['22'],
        image:logo,
        address:"山东省立医院普外科主任",
        contact:"电话：0311-86095888",
        description:"擅长领域：普外科手术、胆囊疾病和肝胆胰肿瘤等。",
      },
      { content: '李军教授',
        tabs: ['23'],
        image:logo,
        address:"山西医科大学第一医院胸外科主任",
        contact:"电话：0311-86995114",
        description:"擅长领域：胸部疾病的诊断与手术治疗，包括肺癌、胸腔积液等。",
      },
      // ...more cards
    ]);
    let activeTab = ref('1');
    let activePage = ref(1);
    const pageSize = 5;

    const filteredCards = computed(()=>{
      if(activeTab.value.includes('all')){
        return  cards.value;
      }else{
        return cards.value.filter(card => {
          // return card.tabs.includes(activeTab.value) && card.filter === someCondition;
          return card.tabs.some(tab => activeTab.value.includes(tab));
        });
      }
    });

    const currentCards = computed(()=> {
      const start = (activePage.value - 1) * pageSize;
      return filteredCards.value.slice(start, start + pageSize);
    });

    const handlePageChange = (page)=>{
      activePage.value = page;
    };

    const searchText = ref('');

    const handleSearch = () => {
      // 处理搜索逻辑
      console.log('搜索：', searchText.value);
    };

    const handleClear = () => {
      searchText.value = '';
    };

    return {
      tabs,
      activeTab,
      cards,
      currentCards,
      pageSize,
      filteredCards,
      searchText,
      handleSearch,
      handleClear,
      handlePageChange}
  },

  mounted() {
    const scrollbarRef = this.$refs.scrollbarRef.$el;
    scrollbarRef.addEventListener("wheel", this.handleMouseWheel);
  },
  methods: {
    handleMouseWheel(event) {
      event.stopPropagation();
      event.preventDefault();

      const scrollbarWrapper = this.$refs.scrollbarRef.$el;
      const contentWrapper = scrollbarWrapper.querySelector(
          ".el-scrollbar__wrap"
      );

      const delta = Math.sign(event.deltaY) * 100;
      contentWrapper.scrollTop += delta;
    },
  },

}
</script>

<style>
.container {
  display: flex;
}

.tabsWrapper {
  width: 200px;
  margin-right: 10px;
}


.cardsWrapper {
  margin-left: 50px;
}

.scrollbar-wrapper {
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
}

.box-card {
  width: 1000px;
  margin-top: 10px;
  transition: transform 0.3s;
}

.box-card:hover {
  transform: scale(1.05);
}

.card-content {
  display: flex;
}

.image-wrapper {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-wrapper {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.card-metadata {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}

.search-wrapper {
  width: 500px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

</style>
